<h2>复杂动画序列</h2>
<ul>
  <li>query() 用于查找一个或多个内部 HTML 元素。</li>
  <li>stagger() 用于为多元素动画应用级联延迟。</li>
  <li>group() 用于并行执行多个动画步骤。</li>
  <li>sequence() 用于逐个顺序执行多个动画步骤。</li>
</ul>

<mat-card>
  <h3 class="title">逐个淡入淡出 <span>query && stagger</span></h3>
  <button mat-raised-button (click)="add()">增加</button>
  <button mat-raised-button (click)="remove()">移除</button>

  <div class="box-container" [@fadeIn]="images.length">
    <div class="box" *ngFor="let image of images;let i = index" (click)="del(i)">
      <img [src]="image.src">
    </div>
  </div>

  <h3 class="title">并行动画 <span>query && stagger</span></h3>

  <div class="box-container">
    <div class="box" *ngFor="let image of images;let i = index" @groupFlyInOut (click)="del(i)">
      <img [src]="image.src">
    </div>
  </div>
</mat-card>